<template>
    <div>
        <h1>房价增加</h1>
        <table class="table table-bordered">
            <tr>
                <td>房价计划图标</td>
                <td>
                    <img :src="hn.photo" style="max-width: 100px; max-height: 100px">
                    <input type="file" @change="changeImg">
                </td>
            </tr>
            <tr>
                <td>门店id</td>
                <td>
                    <select v-model="hn.menDian">
                        <option value="">请选择</option>
                        <option value="速8">速8</option>
                        <option value="维也纳">维也纳</option>
                        <option value="桔子">桔子</option>
                        <option value="好莱坞">好莱坞</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>房型外键</td>
                <td>
                    <select v-model="hn.houseType">
                        <option value="">请选择</option>
                        <option value="休闲房">休闲房</option>
                        <option value="单身公寓">单身公寓</option>
                        <option value="商务房">商务房</option>
                        <option value="豪华房">豪华房</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>设置的价格</td>
                <td>
                    <input type="text" v-model="hn.price">
                </td>
            </tr>
            <tr>
                <td>房价名称</td>
                <td>
                    <input type="text" v-model="hn.name">
                </td>
            </tr>
            <tr>
                <td>房量数量</td>
                <td>
                    <input type="text" v-model="hn.houseNum">
                </td>
            </tr>
            <tr>
                <td>早餐数量</td>
                <td>
                    <input type="text" v-model="hn.foodNum">
                </td>
            </tr>
            <tr>
                <td>人数数量</td>
                <td>
                    <input type="text" v-model="hn.personNum">
                </td>
            </tr>
            <tr>
                <td>房价计划状态</td>
                <td>
                    <input type="radio" name="st" v-model="hn.state" :value="0">禁用
                    <input type="radio" name="st" v-model="hn.state" :value="1">启用
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="修改" @click="add">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

let route = useRoute();
let router = useRouter();
let data: any = reactive({
    hn: {
        "photo": "",
        "menDian": "",
        "houseType": "",
        "price": '',
        "name": "",
        "houseNum": '',
        "foodNum": '',
        "personNum": '',
        "state": 0,
    },
});
let { hn } = toRefs(data);

let add = () => {
    let obj = {
        id: route.query.id,
        "photo": hn.value.photo,
        "menDian": hn.value.menDian,
        "houseType": hn.value.houseType,
        "price": hn.value.price,
        "name": hn.value.name,
        "houseNum": hn.value.houseNum,
        "foodNum": hn.value.foodNum,
        "personNum": hn.value.personNum,
        "state": hn.value.state,
    };
    axios({
        url: '/api/HouseNumber/Update',
        method: 'put',
        data: obj
    }).then((res) => {
        if (res.data.data == -1) {
            alert("名称不能重复")
            return;
        }
        else if (res.data.data == 1) {
            alert("修改成功")
            router.push('/list')
        }
        else {
            alert("修改失败")
        }
    })

}
const changeImg = (i:any) => {
    var formdata=new FormData();
   var file=i.target.files[0];
   formdata.append("file",file);
   axios.post("/api/HouseNumber/Images",formdata).then((res)=>{
       console.log(res);
       hn.value.photo=res.data;
   })
}

onMounted(() => {
    FanTians();
})
const FanTians=()=>{
    let obj = {
        id:route.query.id,
    }
    axios({
        url: '/api/HouseNumber/FanTian',
        method: 'get',
        params: obj
    }).then((res) => {
       hn.value=res.data.data;
    })
}
</script>

<style scoped></style>